<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style type="text/css">
        /* 去除所有的页边距 */
        *{
            margin:0px;
            padding:0px;
        }
        /* 设置一个背景颜色 */
        body{
            background-color: #DFF0D8;
        }
        #titletab{
            background-color: #ffffff;
        }
        .me{
            font-size: 18px;
            color: #000000;

        }
        #first {
            width: 100%;
            height: 50px;
            background-color: #ffffff;
            line-height: 50px;
        }

    </style>
</head>
<body>
<div class="container" style=" margin-top:10px;">
    <!--        标题部分-->
    <div class="row clearfix" >
        <div class="col-md-12 column">
            <ul class="layui-nav layui-bg-green" lay-filter="">
                <!--                    class="layui-this" 使得按钮处于选中-->
                <li class="layui-nav-item"><a href="/pages/首页.html">首页</a></li>
                <li class="layui-nav-item"><a href="/pages/客房管理.html">客房管理</a></li>
                <li class="layui-nav-item"><a href="/pages/会员管理.html">会员管理</a></li>
                <li class="layui-nav-item"><a href="/pages/商品管理.html">商品管理</a></li>
                <li class="layui-nav-item layui-this"><a href="">员工管理</a></li>
                <li class="layui-nav-item"><a href="/pages/系统日志.html">系统日志</a></li>
            </ul>
        </div>
    </div>
    <div class="modal-header container">
        <div class="row clearfix col-md-12" >
            <div id="first" class="form-inline row form-group form-group-lg ">
                <label class="col-lg-7 me" >员工管理</label>
                <div>
                    <div>
                        <input type="text" class="form-control" placeholder="输入身份证号或姓名" name="select_input" id="select_input">
                        <button class="btn btn-default" type="button" onclick="doSelect()">检索</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <button class="btn btn-default" type="button" onclick="showAddModal()">添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>联系方式</td>
                    <td>员工种类</td>
                    <td>权限等级</td>
                    <td>密码</td>
                    <td>身份证号</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>
        </div>
    </div>

</div>





<!-- 删除的模态框 -->
<div class="modal fade" tabindex="-1" role="dialog" id="delModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="del_id">
                <p id="del_msg"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doDelete()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 修改的模态框 -->
<div class="modal fade" tabindex="-1" role="dialog" id="editModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="edit_id">
                <form class="form-horizontal">
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">姓名</label>
                        <div class="col-lg-8">
                            <input type="text" name="edit_name" id="edit_name" class="form-control"
                                   placeholder="请输入员工姓名">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">电话</label>
                        <div class="col-lg-8">
                            <input type="text" name="edit_tel" id="edit_tel" class="form-control"
                                   placeholder="请输入员工电话号码">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">员工种类</label>
                        <div class="col-lg-8">
                            <input type="text" name="edit_stuff" id="edit_stuff" class="form-control"
                                   placeholder="请输入员工种类">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">权限等级</label>
                        <div class="col-lg-8">
                            <input type="text" name="edit_level" id="edit_level" class="form-control"
                                   placeholder="请输入员工权限等级">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">密码</label>
                        <div class="col-lg-8">
                            <input type="text" name="edit_pin" id="edit_pin" class="form-control"
                                   placeholder="请输入员工密码">
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doEdit()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<div class="modal fade" tabindex="-1" role="dialog" id="addModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="add_id">
                <form class="form-horizontal">
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">姓名</label>
                        <div class="col-lg-8">
                            <input type="text" name="add_name" id="add_name" class="form-control"
                                   placeholder="请输入员工姓名">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">性别</label>
                        <div class="col-lg-8">
                            <select name="add_sex" id="add_sex" class="form-control">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">电话</label>
                        <div class="col-lg-8">
                            <input type="text" name="add_tel" id="add_tel" class="form-control"
                                   placeholder="请输入员工电话号码">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">员工种类</label>
                        <div class="col-lg-8">
                            <input type="text" name="add_stuff" id="add_stuff" class="form-control"
                                   placeholder="请输入员工种类">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">权限等级</label>
                        <div class="col-lg-8">
                            <input type="text" name="add_level" id="add_level" class="form-control"
                                   placeholder="请输入员工权限等级">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">密码</label>
                        <div class="col-lg-8">
                            <input type="text" name="add_pin" id="add_pin" class="form-control"
                                   placeholder="请输入员工密码">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">身份证</label>
                        <div class="col-lg-8">
                            <input type="text" name="add_idCard" id="add_idCard" class="form-control"
                                   placeholder="请输入员工身份证号">
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doAdd()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" tabindex="-1" role="dialog" id="selectModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="select_id">
                <form class="form-horizontal">
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">姓名</label>
                        <div class="col-lg-8">
                            <input type="text" name="select_name" id="select_name" class="form-control"
                                   placeholder="请输入员工姓名">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">性别</label>
                        <div class="col-lg-8">
                            <select name="select_sex" id="select_sex" class="form-control">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">电话</label>
                        <div class="col-lg-8">
                            <input type="text" name="select_tel" id="select_tel" class="form-control"
                                   placeholder="请输入员工电话号码">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">员工种类</label>
                        <div class="col-lg-8">
                            <input type="text" name="select_stuff" id="select_stuff" class="form-control"
                                   placeholder="请输入员工种类">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">权限等级</label>
                        <div class="col-lg-8">
                            <input type="text" name="select_level" id="select_level" class="form-control"
                                   placeholder="请输入员工权限等级">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">密码</label>
                        <div class="col-lg-8">
                            <input type="text" name="select_pin" id="select_pin" class="form-control"
                                   placeholder="请输入员工密码">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="control-label col-lg-3">密码</label>
                        <div class="col-lg-8">
                            <input type="text" name="select_idCard" id="select_idCard" class="form-control"
                                   placeholder="请输入员工身份证号">
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
\
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script src="/jquery/jquery-3.4.1.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    jQuery(function(){
        //页面加载完毕，就去数据库中获取数据
        //          /all 请求的地址
        jQuery.post("/emp_all",function(rst){//处理响应的结果
            var body="";
            for(var i=0;i<rst.length;i++)
            {
                var json=rst[i];//{"tea_id":1,"tea_name":"zhagnsan","tea_sex":'',"tea_no":""}
                body+="<tr>";
                body+="<td>"+json.id+"</td>";
                body+="<td>"+json.emp_name+"</td>";
                body+="<td>"+json.emp_sex+"</td>";
                body+="<td>"+json.emp_tel+"</td>";
                body+="<td>"+json.emp_stuff+"</td>";
                body+="<td>"+json.emp_level+"</td>";
                body+="<td>"+json.emp_pin+"</td>";
                body+="<td>"+json.emp_idCard+"</td>";
                body+="<td>";
                body+="<a href='#' onclick='showDelModal(\""+json.id+"\",\""+json.emp_name+"\")'>删除</a>&nbsp;&nbsp;";
                body+="<a href='#' onclick='showEditModal(" +
                    "\""+json.id+"\"," +
                    "\""+json.emp_name+"\"," +
                    "\""+json.emp_tel+"\"," +
                    "\""+json.emp_stuff+"\"," +
                    "\""+json.emp_level+"\"," +
                    "\""+json.emp_pin+"\")'>修改</a>";
                body+="</td>"
                body+="</tr>";
            }

            jQuery("#tbody").html(body);
        },"json");//表示返回数据的格式
    });
    function showDelModal(id,name)
    {
        jQuery("#del_id").val(id);
        jQuery("#del_msg").html("确认删除"+name+"的信息?");
        jQuery("#delModal").modal("show");
    }
    function doDelete()
    {
        jQuery("#delModal").modal("hide");
        var id=jQuery("#del_id").val();
        //json格式的属性名称必须与后台对应
        jQuery.post("/emp_delete",{"id":id},function(rst){
            alert(rst);
            //如果删除成功，重新加载数据
            if(rst=='删除成功')
            {
                //重新加载本页面
                location.reload();
            }
        });
    }
    function showEditModal(id,name,tel,stuff,level,pin)
    {
        jQuery("#edit_id").val(id);
        jQuery("#edit_name").val(name);
        jQuery("#edit_tel").val(tel);
        jQuery("#edit_stuff").val(stuff);
        jQuery("#edit_level").val(level);
        jQuery("#edit_pin").val(pin);
        jQuery("#editModal").modal("show");
    }
    function doEdit() {
        jQuery("#editModal").modal("hide");
        var id=jQuery("#edit_id").val();
        var name=jQuery("#edit_name").val();
        var tel=jQuery("#edit_tel").val();
        var stuff=jQuery("#edit_stuff").val();
        var level=jQuery("#edit_level").val();
        var pin=jQuery("#edit_pin").val();
        jQuery.post("/emp_edit",{"id":id,"name":name,"tel":tel,"stuff":stuff,"level":level,"pin":pin},function (rst) {
            alert(rst);
            if(rst=="修改成功")
            {
                location.reload();
            }
        })
    }
    function showAddModal(){
        jQuery("#addModal").modal("show");
    }
    function doAdd() {
        jQuery("#addModal").modal("hide");
        //获取数据
        var name=jQuery("#add_name").val();
        var sex=jQuery("#add_sex").val();
        var stuff=jQuery("#add_stuff").val();
        var level=jQuery("#add_level").val();
        var pin=jQuery("#add_pin").val();
        var tel=jQuery("#add_tel").val();
        var idCard=jQuery("#add_idCard").val();
        jQuery.post("/emp_save",{"name":name,"sex":sex,"tel":tel,"stuff":stuff,"pin":pin,"level":level,"idCard":idCard},function (rst) {
            alert(rst);
            if(rst=="添加成功")
            {
                location.reload();
            }
        })
    }
    function doSelect(){

        var input=jQuery("#select_input").val();
        var flag=false;

        jQuery.post("/emp_findbyname",{"name":input},function(rst){
            jQuery("#tbody").html("");
            var body="";
            body+="<button type=\"button\" class=\"btn btn-primary\" onclick=\"doReturn()\">返回</button>"
                var json=rst;
                body+="<tr>";
                body+="<td>"+json.id+"</td>";
                body+="<td>"+json.emp_name+"</td>";
                body+="<td>"+json.emp_sex+"</td>";
                body+="<td>"+json.emp_tel+"</td>";
                body+="<td>"+json.emp_stuff+"</td>";
                body+="<td>"+json.emp_level+"</td>";
                body+="<td>"+json.emp_pin+"</td>";
                body+="<td>"+json.emp_idCard+"</td>";
                body+="<td>";
                body+="<a href='#' onclick='showDelModal(\""+json.id+"\",\""+json.emp_name+"\")'>删除</a>&nbsp;&nbsp;";
                body+="<a href='#' onclick='showEditModal(" +
                    "\""+json.id+"\"," +
                    "\""+json.emp_name+"\"," +
                    "\""+json.emp_tel+"\"," +
                    "\""+json.emp_stuff+"\"," +
                    "\""+json.emp_level+"\"," +
                    "\""+json.emp_pin+"\")'>修改</a>";
                body+="</td>"
                body+="</tr>";
            jQuery("#tbody").html(body);
        },"json");
        jQuery.post("/emp_findbyidcard",{"idCard":input},function(rst){
            jQuery("#tbody").html("");
            var body="";
            body+="<button type=\"button\" class=\"btn btn-primary\" onclick=\"doReturn()\">返回</button>"
                var json = rst;
                body += "<tr>";
                body += "<td>" + json.id + "</td>";
                body += "<td>" + json.emp_name + "</td>";
                body += "<td>" + json.emp_sex + "</td>";
                body += "<td>" + json.emp_tel + "</td>";
                body += "<td>" + json.emp_stuff + "</td>";
                body += "<td>" + json.emp_level + "</td>";
                body += "<td>" + json.emp_pin + "</td>";
                body += "<td>" + json.emp_idCard + "</td>";
                body += "<td>";
                body += "<a href='#' onclick='showDelModal(\"" + json.id + "\",\"" + json.emp_name + "\")'>删除</a>&nbsp;&nbsp;";
                body += "<a href='#' onclick='showEditModal(" +
                    "\"" + json.id + "\"," +
                    "\"" + json.emp_name + "\"," +
                    "\"" + json.emp_tel + "\"," +
                    "\"" + json.emp_stuff + "\"," +
                    "\"" + json.emp_level + "\"," +
                    "\"" + json.emp_pin + "\")'>修改</a>";
                body += "</td>"
                body += "</tr>";

            jQuery("#tbody").html(body);

        },"json");

    }
    function showSelectModal(id,name,sex,stuff,level,pin,tel,idCard){
        jQuery("#select_id").val(id);
        jQuery("#select_name").val(name);
        jQuery("#select_sex").val(sex);
        jQuery("#select_stuff").val(stuff);
        jQuery("#select_level").val(level);
        jQuery("#select_pin").val(pin);
        jQuery("#select_tel").val(tel);
        jQuery("#select_idCard").val(idCard);
        jQuery("#selectModal").modal("show");
    }
    function doReturn(){
        jQuery.post("/emp_all",function(rst){//处理响应的结果
            var body="";
            jQuery("#tbody").html("");
            for(var i=0;i<rst.length;i++)
            {
                var json=rst[i];
                body+="<tr>";
                body+="<td>"+json.id+"</td>";
                body+="<td>"+json.emp_name+"</td>";
                body+="<td>"+json.emp_sex+"</td>";
                body+="<td>"+json.emp_tel+"</td>";
                body+="<td>"+json.emp_stuff+"</td>";
                body+="<td>"+json.emp_level+"</td>";
                body+="<td>"+json.emp_pin+"</td>";
                body+="<td>"+json.emp_idCard+"</td>";
                body+="<td>";
                body+="<a href='#' onclick='showDelModal(\""+json.id+"\",\""+json.emp_name+"\")'>删除</a>&nbsp;&nbsp;";
                body+="<a href='#' onclick='showEditModal(" +
                    "\""+json.id+"\"," +
                    "\""+json.emp_name+"\"," +
                    "\""+json.emp_tel+"\"," +
                    "\""+json.emp_stuff+"\"," +
                    "\""+json.emp_level+"\"," +
                    "\""+json.emp_pin+"\")'>修改</a>";
                body+="</td>"
                body+="</tr>";
            }

            jQuery("#tbody").html(body);
        },"json");//表示返回数据的格式
    }
</script>
</html>